<template>
  <div  style="width: 100%;">
    <div style="display: flex;justify-content: space-between;margin-bottom: 5px">
      <div>
        <el-input v-model="search_text"
                  :disabled="showAdvanceSearchVisible"
                  @keydown.enter.native="initPerson"
                  size="small"
                  style="width: 300px;margin-right: 10px"
                  prefix-icon="el-icon-search"
                  clearable
                  @clear="initPerson"
                  placeholder="请输入姓名或门派名称或手机号或邮箱进行搜索。。。"></el-input>
        <el-button icon="el-icon-search" :disabled="showAdvanceSearchVisible" type="primary" size="small" @click="initPerson">搜索</el-button>
      </div>
      <div>
        <el-button type="success" size="mini" icon="el-icon-refresh" @click="initPerson"></el-button>
      </div>
    </div>
    <div>
      <el-table
          :data="persons"
          stripe
          border
          size="small"
          style="width: 100%"
          @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="50">
        </el-table-column>
        <el-table-column
            prop="seq_no"
            label="序号"
            align="center"
            width="80">
        </el-table-column>
        <el-table-column prop="userFace" label="头像" width="70">
          <template v-slot="scope">
<!--            <img :src="scope.row.userFace" alt="" width="40" height="40">-->
            <el-popover placement="top-start" trigger="hover">
              <div class="row_reserve">
                <img class="big-img" :src="scope.row.userFace"/>
              </div>
              <div slot="reference">
                <img class="td-img" width="40" height="40" :src="scope.row.userFace" />
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名"
            width="110">
        </el-table-column>
        <el-table-column
            prop="sex"
            label="性别"
            width="50">
        </el-table-column>
        <el-table-column
            prop="idCard"
            label="身份证号码"
            width="150">
        </el-table-column>
        <el-table-column
            prop="birthday"
            label="出生日期"
            width="150">
        </el-table-column>
        <el-table-column
            prop="phone"
            label="手机号码"
            width="140">
        </el-table-column>
        <el-table-column
            prop="email"
            label="电子邮箱"
            width="150">
        </el-table-column>
        <el-table-column
            prop="region"
            label="区域"
            width="150">
        </el-table-column>
        <el-table-column
            prop="person_rank_name"
            label="等级"
            width="100">
        </el-table-column>
        <el-table-column
            prop="realm_name"
            label="境界"
            width="100">
        </el-table-column>
        <el-table-column
            prop="blood_volume"
            label="血量"
            width="100">
        </el-table-column>
        <el-table-column
            prop="wealth"
            label="财富"
            width="100">
          <template slot-scope="scope">
          <el-popover
              placement="right"
              width="200"
              trigger="click">
            <el-table  :data="scope.row.wealth.wealth" style="width: 100%"><!--{"丹药": 30, "武器": 30, "秘籍": 30, "上品灵石": 30, "下品灵石": 3000, "中品灵石": 300, "极品灵石": 0}-->
              <el-table-column width="100" prop="name" label="物品"/>
              <el-table-column width="100" prop="num" label="数量"/>

            </el-table>
            <el-button size="small" type="success" round slot="reference">{{scope.row.storage_space}}</el-button>
          </el-popover>
          </template>
        </el-table-column>
        <el-table-column
            prop="createdate"
            label="创建时间"
            width="150">
        </el-table-column>

        <el-table-column
            width="180"
            label="操作">
          <template slot-scope="scope">
            <el-tooltip placement="top">
              <div slot="content">稍后系统会自动将账号，密码相关信息通过短信或邮件的方式发送！</div>
              <el-button size="small" type="primary" @click="generateAccount(scope.row)">账号发放</el-button>
            </el-tooltip>
            <el-button size="small" type="danger" @click="deleteHandler(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex;justify-content: space-between;width: 100%;margin-top: 5px" >
        <div>
          <el-button size="small" type="danger"
                     :disabled="this.multipleSelection.length===0"
                     @click="deleteMany"
          >批量删除</el-button>
        </div>
        <div>
          <el-pagination
              background
              @current-change="currentChange"
              @size-change="sizeChange"
              layout="sizes,prev, pager, next, jumper, ->, total"
              :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AccountIssuance",
  data(){
    return {
      persons:[],
      admin:{
        person_id:'',
        name:'',
        phone:'',
        username:'',
        password:'',
        createdate:'',
        enable:true
      },
      showAdvanceSearchVisible:false,
      multipleSelection:[],
      search_text:"",
      total:0,
      size:10,
      currentPage:1,
    }
  },
  methods:{
    //生成账号
    generateAccount(data){
      this.admin.person_id=data.id;
      this.admin.name=data.name;
      this.admin.phone=data.phone;

      this.$postRequest("/system/admin/generateAccount",this.admin).then(resp=>{
        if(resp){
          this.$message.success(resp.message);
          this.initPerson();
        }
      });
   },
    //初始化人员
    initPerson(){
      this.$getRequest("/system/person/initPerson?search_text="+this.search_text+"&currentPage="+this.currentPage+"&size="+this.size).then(resp=>{
        if(resp){
          //alert(JSON.stringify(resp))
          this.persons=resp.data;
          this.total=resp.total;
        }
      });
    },
    //每页条数事件
    sizeChange(size){
      this.size = size;
      this.initPerson();
    },
    //当前页事件
    currentChange(currentPage){
      this.currentPage = currentPage;
      this.initPerson();
    },
    //多选
    handleSelectionChange(val){
      this.multipleSelection = val;
    },
    deleteHandler(data){
      this.$confirm('此操作将永久删除['+data.name+']该注册人员, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$deleteRequest("/system/person/"+data.id).then(resp=>{
          if(resp){
            this.initPerson();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //注册人员批量删除
    deleteMany(){
      this.$confirm('此操作将永久删除['+this.multipleSelection.length+']个账号, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids = "?";
        this.multipleSelection.forEach(item=>{
          ids+= "ids=" + item.id + "&";
        });
        ids = ids.substring(0,ids.length-1);
        this.$deleteRequest("/system/person/"+ids).then(resp=>{
          if(resp){
            this.initPerson();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
 },
  mounted() {
    this.initPerson();
  }
}
</script>

<style scoped>

</style>